<template>
  <div class="hideUpload">
    <el-upload
      drag
      list-type="picture"
      action=""
      :name="name"
      :show-file-list="true"
      :limit="1"
      :auto-upload="true"
      :beforeUpload="beforeUpload"
      :http-request="upload"
      :on-success="uploadSuccess"
      :on-change="(file,fileList)=>{
        handleChange(file,fileList,name)
      }"
      :on-remove="(file,fileList)=>{
        handleRemove(file,fileList,name)
      }"
      v-bind="$attrs"
      v-on="$listeners"
      ref="el-upload">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">拖拽或<em>点击上传</em></div>
    </el-upload>
  </div>
</template>

<script>
  export default {
    name: "my-upload-single",
    /** v-model双向绑定 **/
    model: {
      prop: 'value',
      event: 'success'
    },
    props: {
      /** 文件存放文件夹 **/
      folder: {
        type: String,
        default: 'default'
      },
      /** 双向绑定值 **/
      value: [String,Number],
      /** name **/
      name: {
        type: String,
      }
    },
    methods: {
      /** 上传前钩子 **/
      beforeUpload(){
        this.$emit('upload')
      },
      /** 自定义上传方法 **/
      upload(param){
        let formData = new FormData();
        formData.append('file',param.file);
        formData.append('folder', this.folder);
        /** 一定要return,否则上传成功回调无法获取参数 **/
        return this.$ajax.fileUpload(formData);
      },
      /** 手动上传 **/
      submit(){
        this.$refs['el-upload'].submit();
      },
      /** 上传成功回调,返回值双向绑定 **/
      uploadSuccess(res){
        this.$emit('success',res)
        this.$emit('done')
      },
      /** 上传文件变动 **/
      handleChange(file,fileList,name){
        if(fileList.length == 0){
          document.getElementsByName(name)[0].parentNode.style.display = "block";
        }else{
          document.getElementsByName(name)[0].parentNode.style.display = "none";
        }
      },
      /** 上传文件删除 **/
      handleRemove(file,fileList,name){
        if(fileList.length == 0){
          document.getElementsByName(name)[0].parentNode.style.display = "block";
        }else{
          document.getElementsByName(name)[0].parentNode.style.display = "none";
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-upload-list--picture label{
    display: none;
    visibility: hidden;
  }
  ::v-deep .el-upload-list--picture i[class="el-icon-close-tip"]{
    display: none;
    visibility: hidden;
  }
  ::v-deep .el-upload-list--picture img{
    content: url('../../assets/img/upload/attachent.png');
    border-radius: 10px;
  }
  ::v-deep .el-upload-dragger{
    width: 200px;
    height: 100px;
    i{
      font-size: 50px;
      margin: 10px;
    }
    .el-upload__text{
      margin-top: -10px;
    }
  }
</style>
